<div id="main-content">
    <div id="main" class="main">
		<div class="user-hd">
			<div id="upload" class="fr" style="margin: 10px 0 0 0;">
                <a href="{:U('User/addGroup')}" class="uploadify-button">添加角色</a>
            </div>
			<h2>系统管理>>{$page_title}</h2>
		</div>
        <!-- 视频上传列表 start -->
        <div class="spin-cont">
            <form name="data_form" id="group_list_data_form" action="{:U('User/userGroupList')}" method="get">
                <input type="hidden" name="order" id="order" value="{$order}" />
            </form>
            <table>
                <tr>
                    <th class="spin-tit" style="width: 160px;">角色</th>
                    <th class="spin-tit">描述</th>
                    <th style="width: 120px;">
                        成员个数
                        <if condition="'user_count_asc' EQ $order">
                            <span class="th_order" onclick="listOrder('user_count_desc')">
                                ▲
                            </span>
                        <elseif condition="'user_count_desc' EQ $order"/>
                            <span class="th_order" onclick="listOrder('user_count_asc')">
                                ▼
                            </span>
                        </if>
                    </th>
                    <th style="width: 180px;">操作</th>
                </tr>
                <volist name="data_list_data[data_list]" id="vo">
                <tr>
                    <td class="spin-tit">{$vo.group_name}</td>
                    <td class="spin-tit">{$vo.description}</td>
                    <td>{$vo.user_count}</td>
                    <td>
						<if condition="1 NEQ $vo[group_id]">
                        <a href="{:U('User/editGroup', array('group_id'=>$vo[group_id]))}" class="delfilebtn" >编辑</a>&nbsp; | &nbsp;&nbsp;
                        </if>
						<a href="javascript:;" onclick="showGroupUserList({$vo.group_id})" class="delfilebtn" >成员列表</a>
						<if condition="1 NEQ $vo[group_id]">
                        &nbsp; | &nbsp;&nbsp;<a href="javascript:;" onclick="deleteGroup({$vo.group_id}, '{$vo.group_name}')" class="delfilebtn" >删除</a>
						</if>
					</td>
                </tr>
                </volist>
            </table>
            <div class="page txt-center">
                {$data_list_data.pager}
            </div>
        </div>
    </div>
</div>
<script language="javascript">
    var delete_group_url = '{:U("User/deleteGroup")}';
    
    //列表排序
    function listOrder(order)
    {
        $('#order').val(order);
        $('#group_list_data_form').submit();
    }
    
    //获取成员列表
    function showGroupUserList(group_id)
    {
        var message_content = $('#message_box').html();
        message_content = message_content.replace(/#tpl#/ig, '');
        boxy = new Boxy(message_content, {
            closeable: true,
            modal: true
        });
        
        $.ajax({
            type:'post',
            dataType:'json',
            url:'/Admin/User/userList',
            data:{
				group_id:group_id,
                option:'ajax'
            },
            success:function(data){
                var user_list = '';
                for (var i in data) {
                    user_list += '<tr><td class="spin-tit">'+data[i].user_name+'</td><td class="spin-tit">'+data[i].nick_name+'</td></tr>';
                }
                if (!user_list) {
                    user_list = '<tr><td colspan="2">暂无数据</td></tr>';
                }
                $('#user_list').html(user_list);
            }
        });
    }
</script>

<style type="text/css">
    .boxy-wrapper .message_box{
        width: 600px;
		height: 380px;
        background: #fff;
        border-radius: 10px;
        border: 0px;
    }
    .boxy-wrapper .message_box .title{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        font-size: 14px;
        text-align: center;
        padding-left: 30px;
    }
    .boxy-wrapper .message_box .title .btn_close_box{
        float: right;
        margin-right: 10px;
        font-size: 12px;
    }
    .boxy-wrapper .message_box .content{
        padding: 0 10px 30px 10px;
        line-height: 30px;
        font-size: 12px;
    }
</style>
<div class="hidden" id="message_box">
    <div class="message_box">
        <div class="title">
            <a href="javascript:;" onclick="closeBoxy()" class="btn_close_box">关闭</a>
            成员列表
        </div>
        <div class="content">
            <div class="spin-cont" style="height: 270px; overflow: scroll; overflow-x: hidden; padding-top: 0px;">
                <form name="data_form" action="{:U('User/userGroupList')}" method="get">
                    <input type="hidden" name="order" id="order" value="{$order}" />
                </form>
                <table>
                    <tr>
                        <th class="spin-tit" style="width: 160px;">用户名</th>
                        <th class="spin-tit" style="width: 160px;">姓名</th>
                    </tr>
                    <tbody id="user_list#tpl#"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>